<template>
  <div>
    <my-header title="发现"></my-header>
   	<div class="main">
   	  <div class="m-fl">
     			<dl>
     				<dd>
     					<span>金币商城</span>
     					<span>0元好物在这里</span>
            </dd>
     				<dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
     			</dl>
          <dl>
            <dd>
              <span>金币商城</span>
              <span>0元好物在这里</span>
            </dd>
            <dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
          </dl>
          <dl>
            <dd>
              <span>金币商城</span>
              <span>0元好物在这里</span>
            </dd>
            <dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
          </dl>
          <dl>
            <dd>
              <span>金币商城</span>
              <span>0元好物在这里</span>
            </dd>
            <dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
          </dl>
          <dl>
            <dd>
              <span>金币商城</span>
              <span>0元好物在这里</span>
            </dd>
            <dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
          </dl>
          <dl>
            <dd>
              <span>金币商城</span>
              <span>0元好物在这里</span>
            </dd>
            <dt><img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"></dt>
          </dl>
   		</div>
      <div class="tu">
        <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/">
      </div>
      <div class="tj">
        <div class="tj-top">
          <span class="tj-tu"><img src="../../static/images/left.png"></span>
          <span class="tj-tu1"><img src="../../static/images/zan.png"></span>
          <span class="tit">美食热推</span>
          <span class="tj-tu"><img src="../../static/images/right.png"></span>
        </div>
        <p>
          你的口味, 我都懂得
        </p>
        <div class="tj-center">
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
        </div>
        <div class="tj-bottom">
          查看更多 >
        </div>
      </div>
      <div class="tj">
        <div class="tj-top">
          <span class="tj-tu"><img src="../../static/images/left.png"></span>
          <span class="tj-tu1"><img src="../../static/images/zan.png"></span>
          <span class="tit">天天特价</span>
          <span class="tj-tu"><img src="../../static/images/right.png"></span>
        </div>
        <p>
          你的口味, 我都懂得
        </p>
        <div class="tj-center">
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
        </div>
        <div class="tj-bottom">
          查看更多 >
        </div>
      </div>
      <div class="tj">
        <div class="tj-top">
          <span class="tj-tu"><img src="../../static/images/left.png"></span>
          <span class="tj-tu1"><img src="../../static/images/zan.png"></span>
          <span class="tit">限时好礼</span>
          <span class="tj-tu"><img src="../../static/images/right.png"></span>
        </div>
        <p>
          你的口味, 我都懂得
        </p>
        <div class="tj-center">
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
            </dt>
            <dd>
              <span>南昌小炒肉盖饭</span>
              <span>￥16 <span>￥22</span></span>
            </dd>
          </dl>
        </div>
        <div class="tj-bottom">
          查看更多 >
        </div>
      </div>
   	</div>

    <my-footer></my-footer>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import myFooter from '@/components/myFooter'
export default {
  components: {
    myHeader,
    myFooter
  }
}
</script>

<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.main{
  .pxToRem(margin-top,88);
  .pxToRem(margin-bottom,104);
  .m-fl{
    box-sizing: border-box;
    display: flex;
    flex-wrap:wrap;
    background: #fff;
    dl{
      box-sizing: border-box;
      .pxToRem(padding,30);
      display: flex;
      justify-content:center;
      border-top: 1px solid #ededed;
      border-right: 1px solid #ededed;
      width:50%;
      &:nth-child(2n){
        border-right: none;
      }
      &:nth-child(1),&:nth-child(2){
        border-top: none;
      }
      dd{
        flex:1;
        display: flex;
        flex-direction:column;
        span{
          &:first-child{
            color: #ff9900;
            .pxToRem(font-size,32);
          }
          &:last-child{
            .pxToRem(margin-top,20);
            color: #999;
            .pxToRem(font-size,24);
          }
        }
      }
      dt{
        .pxToRem(width,90);
        img{
          width: 100%;
        }
      }
    }
  }
  .tu{
    .pxToRem(margin-top,20);
    img{
      width: 100%;
    }
  }
  .tj{
    .pxToRem(margin-top,20);
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    .pxToRem(padding,30);
    .tj-top{
      display: flex;
      justify-content:center;
      .tj-tu1{
        .pxToRem(width,30);
        .pxToRem(height,30);
        .pxToRem(margin-left,10);
        img{
          width: 100%;
        }
      }
      .tj-tu{
        .pxToRem(width,30);
        .pxToRem(height,15);
        img{
          width: 100%;
        }
      }
      .tit{
        font-weight: bold;
        .pxToRem(font-size,32);
        .pxToRem(margin-left,10);
        .pxToRem(margin-right,10);
      }
    }
    p{
      color: #999;
      .pxToRem(margin-top,5);
      .pxToRem(font-size,20);
      text-align: center;
    }
    .tj-center{
      display: flex;
      .pxToRem(margin-top,30);
      dl{
        flex:1;
        .pxToRem(margin-right,10);
        dt{
          img{
            width: 100%;
          }
        }
        dd{
          display: flex;
          flex-direction:column;
          span{
            &:first-child{
              .pxToRem(margin-top,10);
              color:#333;
              .pxToRem(font-size,26);
            }
            &:last-child{
              .pxToRem(margin-top,30);
              color: #666;
              span{
                &:last-child{
                  text-decoration: line-through;
                  .pxToRem(font-size,22);
                }
              }
            }
          }
        }
      }
    }
    .tj-bottom{
      width: 100%;
      color: #999;
      text-align: center;
      .pxToRem(margin-top,20);
    }
  }
}
</style>
